{% extends 'core/base.html' %}

{% block title %}
  Мои рецепты
{% endblock %}

{% block content %}
  <div class="w-1/2 my-6 mx-auto p-6 bg-gray-100 border border-gray-300 rounded-xl">
    <h2 class="text-2xl text-center">Мои рецепты</h2>
  </div>

  <div>
    {% if recipe_set %}
      {% for recipe in recipe_set %}
        <div class="w-1/2 my-6 mx-auto p-6 bg-gray-100 border border-gray-300 rounded-xl">
          <div>
            {# prettier-ignore #}
            <a href="{% url 'recipe:detail' recipe.id %}">
              <div>
                <img src="{{ recipe.image.url }}" class="rounded-xl mx-auto img-fluid" style="height: 320px;width: 3200px;object-fit: cover" />
              </div>

              <div class="p-6">
                <h2 class="text-2xl text-center pb-6">{{ recipe.name }}</h2>
                <h2 class="text-xl pb-4 text-gray-800">Описание:</h2>
                <p class="text-l text-gray-700">{{ recipe.description }}</p>
              </div>

              <div class="text-l text-gray-700 d-flex flex justify-between">
                <p class="text-green-600">{{recipe.created_at}}</p>
                <p>@{{recipe.created_by}}</p>
              </div>
            </a>
          </div>
        </div>
      {% endfor %}
    {% else %}
      <div class="w-1/2 my-6 mx-auto p-6 bg-gray-100 border border-gray-300 rounded-xl">Пока пусто</div>
    {% endif %}
  </div>
{% endblock %}
